<template>
	<div class="list-horizontal flex justify-between">
		<slot name="title">
			<p class="text-lg">{{ title }}</p>
		</slot>
		<div class="flex items-center justify-center gap-1" v-if="!disablePrev || !disableNext">
			<base-button
				@click="prev"
				:disabled="disablePrev"
				class="bg-bg-3 h-[28px] !w-[34px] rounded-tr-[16px] rounded-br-[16px]">
				<base-icon
					name="back"
					class="py-[6px] text-t-1 text-[18px]"
					:class="{ 'text-t-4': disablePrev }" />
			</base-button>

			<base-button
				@click="next"
				:disabled="disableNext"
				class="bg-bg-3 h-[28px] !w-[34px] rounded-tl-[16px] rounded-bl-[16px]">
				<base-icon
					name="go"
					class="py-[6px] text-t-1 text-[18px]"
					:class="{ 'text-t-4': disableNext }" />
			</base-button>
		</div>
	</div>
	<div class="flex items-center" ref="listWidthRef">
		<div v-if="loading || !list.length" class="min-h-[100px] w-full">
			<base-loading-box class="min-h-[100px]" :isEmpty="!list.length" :loading="loading" />
		</div>
		<div v-else :id="sliderId" class="slider gap-4" ref="el">
			<template v-for="item in list" :key="item.id">
				<div class="slide relative app-hover-offset max-h-[268px] mt-4" v-if="item.isShow">
					<slot :item="item" />
				</div>
			</template>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import BaseButton from '@/components/base/button/index.vue'
import BaseIcon from '@/components/base/icon/index.vue'
import BaseLoadingBox from '@/components/base/loading-box/index.vue'
import { useResizeObserver, useScroll } from '@vueuse/core'

const props = defineProps({
	title: String,
	list: Array as any,
	loading: {
		type: Boolean,
		default: false
	},
	sliderId: {
		type: String,
		default: 'slider-container'
	}
})

const listWidthRef = ref<any | null>(null)
const el = ref<any | null>(null)
const { x } = useScroll(el)
const listWidth: any = ref(0)

const disablePrev = ref(true)
const disableNext = ref(false)

const itemWidth = computed(() => {
	if (window.innerWidth > 1390) return 1390 / 5
	else return window.innerWidth / 5
})

useResizeObserver(listWidthRef, (entries) => {
	const entry = entries[0]
	const { width } = entry.contentRect
	listWidth.value = width
	const offsetWidth: any = document.getElementById(props.sliderId)?.offsetWidth
	if (width <= offsetWidth) {
		disableNext.value = false
	} else {
		disableNext.value = true
	}
})

watch(x, (val) => {
	if (el.value?.scrollWidth - el.value?.clientWidth - el.value?.scrollLeft === 0) {
		disableNext.value = true
		disablePrev.value = false
	}
	if (val === 0) {
		disableNext.value = false
		disablePrev.value = true
	}
})

watch(
	() => props.loading,
	(val) => {
		if (val && props.list.length) {
			nextTick(() => {
				setState()
			})
		}
	}
)

const prev = () => {
	const el: any = document.getElementById(props.sliderId)
	el.scrollLeft -= itemWidth.value
	disableNext.value = false
	if (el.scrollLeft < itemWidth.value) {
		disablePrev.value = true
	} else {
		disablePrev.value = false
	}
}

const next = () => {
	const el: any = document.getElementById(props.sliderId)
	el.scrollLeft += itemWidth.value
	const scrollRight = el.scrollWidth - el.clientWidth - el.scrollLeft

	if (el.scrollLeft > 0) {
		disablePrev.value = false
	}
	if (scrollRight - itemWidth.value <= 0) {
		disablePrev.value = false
		disableNext.value = true
	} else {
		disableNext.value = false
	}
}

const setState = () => {
	const el: any = document.getElementById(props.sliderId)
	if (el) {
		const scrollRight = el.scrollWidth - el.clientWidth - el.scrollLeft

		if (el.scrollLeft > 0) {
			disablePrev.value = false
		}

		if (scrollRight !== 0) {
		} else if (scrollRight - itemWidth.value <= 0) {
			disableNext.value = true
		} else {
			disableNext.value = false
		}
	}
}

onMounted(() => {
	setState()

	let templateElements = document.querySelectorAll('#slider-container')
	if (templateElements.length > 1) {
		console.log('Slider Id is duplicate, pls add props sliderId !')
	}
})
</script>

<style lang="scss" scoped>
.slider {
	display: flex;
	overflow-y: hidden;
	overflow-x: scroll !important;
	scroll-behavior: smooth;
}

.slider::-webkit-scrollbar {
	height: 5px;
	width: 150px;
	display: none;
}

.slider::-webkit-scrollbar-track {
	background: transparent;
}

.slider::-webkit-scrollbar-thumb {
	background: #888;
}

.slider::-webkit-scrollbar-thumb:hover {
	background: #555;
}

:deep(.n-button .n-button__content) {
	min-width: fit-content;
}

:deep(.n-button .n-button__border) {
	border: none;
}
</style>
